<template>
  <view style="background-color: #181816; height: 100%;">
    <view class="cell_list">
      <!-- 头像 -->
      <view class="head">
        <u-cell-group :border="false">
          <u-cell
            :border="false"
            title="头像"
            :arrow="true"
            @click=""
            titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
            rightIcon="arrow-right"
          >
            <!-- 右边自定义内容头像图片 -->
            <view class="head_img" slot="right-icon" :absolute="false">
              <button
                class="avatar-wrapper"
                open-type="chooseAvatar"
                @chooseavatar="onChooseAvatar"
              >
                <image :src="head"></image>
              </button>
            </view>
            <view slot="right-icon" :absolute="false">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </u-cell>
        </u-cell-group>
        <!-- <label>用户信息</label>
				<text>{{mobile}}</text> -->
      </view>
      <!-- 昵称 -->
      <view class="nickName">
        <u-cell-group :border="false">
          <u-cell
            :border="false"
            title="昵称"
            :value="nickName"
            v-model="nickName"
            @click="editName()"
            :arrow="true"
            titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
          >
            <!-- 右边自定义内容头像图片 -->
            <view slot="right-icon" :absolute="false">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
      <!-- 手机号 -->
      <view class="phone">
        <u-cell-group :border="false">
          <u-cell
            :border="false"
            title="手机号"
            :value="mobile"
            v-model="mobile"
            :arrow="true"
            titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
          >
            <!-- <view slot="right-icon" :absolute="false">
              <u-icon name="arrow-right"></u-icon>
            </view> -->
          </u-cell>
        </u-cell-group>
      </view>
      <!-- 实名认证 -->
<!--      <view class="verify">
        <u-cell-group :border="false">
          <u-cell
            :border="false"
            title="实名认证"
            @click="goVerify"
            :arrow="true"
            titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
          >
            <view slot="right-icon" class="verify-right" :absolute="false">
              <text
                slot="value"
                class="verify-null"
                v-if="isVerify == '未认证'"
              >
                未认证
              </text>
              <u-icon
                v-if="isVerify == '未认证'"
                class="icons"
                name="arrow-right"
              ></u-icon>
              <text
                slot="value"
                class="u-slot-value"
                v-if="isVerify == '已认证'"
              >
                已认证
              </text>
            </view>
          </u-cell>
        </u-cell-group>
      </view> -->
    </view>

    <!-- 退出登陆 -->
    <view class="quit" @click="logout">
      退出登录
    </view>
    <!-- 修改昵称弹框 -->
    <u-popup
      :show="showEditName"
      :round="20"
      @close="close"
      mode="center"
      bgColor="transparent"
      :safeAreaInsetBottom="false"
      closeOnClickOverlay="true"
    >
      <view
        class="edit_name"
        style="
          width: 600rpx;
          margin: auto;
          background-color: #242424;
          color: #fff;
          border-radius: 20rpx;
        "
      >
        <view class="title">修改昵称</view>
        <view class="used_name">原昵称：{{ nickName }}</view>
        <view class="input">
          <input
            v-model="newNickname"
            placeholder="支持2-16位中英文字母"
            placeholder-style="text-align:center;line-height:80rpx"
          />
        </view>
        <view class="btn" style="display: flex;">
          <button class="btn_style" @click="close()">取消</button>
          <button class="btn_style" @click="confirmEdit">确认</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from '@/request/api.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      head: '',
      token: '', //用户token
      uid: '', //用户id
      mobile: '', //用户注册手机号
      nickName: '', //用户昵称
      newNickname: '',
      update_time: '', //用户注册时间
      user_moilbe: false,
      showEditName: false,
      isVerify: '',
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
        console.log(this.screenHeight)
      },
    })
    this.getInfo()
    // 加载我的信息需判断用户是否登录
    if (this.token == '') {
      /* 提示用户需要登录操作 */
      uni.showModal({
        title: '提示',
        content: '请先登录再进行操作',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            uni.redirectTo({
              url: 'mine',
            })
            /*  */
          } else if (res.cancel) {
          }
        },
      })
    }
  },
  methods: {
    // 获取用户信息
    getInfo() {
      /* 读取缓存 */
      let userInfo = uni.getStorageSync('userInfo')
      console.log(userInfo)
      if(userInfo.nickName==null||userInfo.nickName==''){
      		  this.nickName='用户昵称未设置'
      }else{
      		  this.nickName = userInfo.nickName
      }
	  let mobile=uni.getStorageSync('phone')
      this.mobile = String(mobile).replace(
        String(mobile).slice(3, 7),
        '*'.repeat(4),
      )
      this.head = userInfo.avatarUrl
      this.token = userInfo.token
      this.uid = userInfo.uid
      if (this.mobile != '') {
        this.user_moilbe = true
      }
      if (userInfo.is_auth == 1) {
        this.isVerify = '未认证'
      } else {
        this.isVerify = '已认证'
      }
      this.update_time = userInfo.update_time
    },
    logout() {
      uni.removeStorage({
        key: 'userInfo',
        success: function (res) {
          uni.setStorageSync('hasLogin', false)
          setTimeout(() => {
            uni.reLaunch(
              {
                url: 'mine',
              },
              1000,
            )
          })
        },
      })
    },
    /* 修改昵称 */
    editName() {
      this.showEditName = true
    },
    close() {
      this.showEditName = false
    },
    confirmEdit() {
      let userInfo = uni.getStorageSync('userInfo')
      let token = userInfo.token
      let uid = userInfo.uid
      const data = {
        uid: uid,
        token: token,
        nickname: this.newNickname,
      }
      api.editUsername(data).then((res) => {
        if (res.code == 200) {
          this.close()
          uni.showToast({
            title: '修改成功',
          })
          const info = uni.getStorageSync('userInfo')
          info.nickName = data.nickname
          info.nickname = data.nickname
          uni.setStorageSync('userInfo', info)
          this.getInfo()
        } else {
          uni.showToast({
            title: '修改失败',
            icon: 'error',
          })
        }
      })
    },
    /* 获取或修改头像 */
    onChooseAvatar(e) {
      console.log(e)
	  /* 判断是否登录*/
      let file = e.detail.avatarUrl
	  this.editHead(file)  
    },
    /* 修改头像 */
    editHead(file) {
      let userInfo = uni.getStorageSync('userInfo')
      let token = userInfo.token
      let uid = userInfo.uid
	  
	  // 2上传文件
	  uni.uploadFile({
	    url: 'https://publish.onedaen.com/wechat/mini/upload_avatar',
	    filePath: file,
	    header: {
	      uid: uid,
	      token: token,
	    },
	    name: 'file',
	    success: (e) => {
			console.log(e)
	      if (JSON.parse(e.data).code == 200) {
	        uni.hideLoading()
	        let headUrl = JSON.parse(e.data).data.url
	        this.head = headUrl
	        const info = uni.getStorageSync('userInfo')
	        info.avatarUrl = this.head
	        uni.setStorageSync('userInfo', info)
	      } else {
	        uni.showModal({
	          title: '提示信息',
	          content: '更改失败！',
	        })
	      }
	    },
	  })
    },
    // 实名认证
    goVerify() {
      if (this.isVerify == '未认证') {
        uni.navigateTo({
          url: '../verify/verify',
        })
      } else {
        return
        uni.navigateTo({
          url: '../verify/verify_success',
        })
      }
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.cell_list {
  padding: 20rpx 0;

  .head {
    display: flex;
    width: 90%;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: #242424;

    .head_img {
      width: 60rpx;
      height: 60rpx;
      margin: 20rpx 0;

      button {
        width: 60rpx;
        height: 60rpx;
        background: #181816;
        border: 0;
        border-radius: 100%;
      }
      image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        left: 0;
        position: absolute;
      }
    }
  }

  .nickName {
    width: 90%;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: #242424;
  }

  .phone {
    width: 90%;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: #242424;
    ::v-deep .u-cell__value {
      padding-right: 40rpx;
    }
  }

  .verify {
    width: 90%;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: #242424;
    .verify-right {
      display: flex;
      align-items: center;
      ::v-deep .u-icon--right {
        margin-left: 8rpx;
      }
      .verify-null {
        color: #606266;
        font-size: 28rpx;
      }
      .u-slot-value {
        padding-right: 40rpx;
        color: #606266;
        font-size: 28rpx;
      }
    }
    // ::v-deep .u-cell__value {
    //   padding-right: 40rpx;
    // }
  }
}

.quit {
  width: 90%;
  margin: 20rpx auto;
  height: 110rpx;
  background-color: #242424;
  border-radius: 20rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 110rpx;
  color: #ed4747;
}

/* 修改昵称弹窗 */
.edit_name {
  .title {
    margin-top: 40rpx;
    text-align: center;
  }
  .used_name {
    margin-top: 40rpx;
    text-align: center;
  }
  .input {
    width: 90%;
    margin: 40rpx auto;
    background-color: #181816;
    height: 40rpx;
    padding: 20rpx 0;
    border-radius: 5rpx;
    ::v-deep input {
      text-align: center !important;
      border-radius: 5rpx !important;
    }
  }
}
.btn {
  display: flex;
  .btn_style {
    background-color: #242424;
    border: 0;
    color: #fff;
    width: 50%;
  }
}
/* 自定义单元格 */
.u-cell__body {
  padding: 0 20rpx !important;
}

.u-icon--right {
  text {
    font-size: 30rpx !important;
  }
}

.u-cell__title-text {
  line-height: 100rpx !important;
}
</style>
